<script setup lang="ts">
import { h } from "vue";

import { ElAvatar, ElButton, ElInput } from "element-plus";

import { ProSelect } from "@/modules/package/form";
import EnumTag from "@/components/common/EnumTag.vue";
import RegionPicker from "@/components/common/RegionPicker.vue";
import DialogMerchantDetail from "../components/DialogMerchantDetail.vue";

import useModal from "@/hooks/useModal";
import useProTable from "@/hooks/useProTable";
import useCategory from "@/hooks/useCategory";
import { parseNumber } from "@/utils/tool";
import ApiMerchant from "@/api/merchant";
import { EnumSettledAuditStatus } from "@/utils/enum";

const { map: mapCategory } = useCategory();

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  {
    label: "Logo",
    width: 96,
    slot: ({ row }: any) =>
      h(ElAvatar, {
        src: row.merchant_logo_png + "?x-oss-process=image/resize,p_20",
      }),
  },
  { label: "品牌名", prop: "merchant_title", minWidth: 120 },
  {
    label: "商户类别",
    minWidth: 120,
    slot: ({ row }: any) => mapCategory.value?.get(row.merchant_type).title,
  },
  {
    label: "城市区域",
    minWidth: 120,
    slot: ({ row }: any) => row.province + row.city + row.district,
  },

  { label: "联系人", prop: "contact_name", minWidth: 100 },
  // { label: "联系电话", prop: "contact_phone", width: 126 },
  { label: "微信", prop: "contact_wechat", width: 140 },
  {
    label: "审核状态",
    width: 100,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumSettledAuditStatus,
        value: row.audit_status,
      }),
  },
  // { label: "申请时间", prop: "create_time", minWidth: 150 },
  {
    label: "操作",
    width: 100,
    fixed: "right",
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          link: true,
          type: row.audit_status == 0 ? "warning" : "primary",
          onClick: () => modalApi.open(row),
        },
        row.audit_status == 0 ? "审核" : "查看"
      ),
  },
];

// 搜索表单
const formItems = [
  {
    label: "审核状态",
    children: {
      field: "audit_status",
      type: ProSelect,
      props: {
        clearable: true,
        options: [
          { label: "待审核", value: 0 },
          { label: "已通过", value: 1 },
          { label: "已拒绝", value: 2 },
        ],
      },
    },
  },
  {
    label: "品牌名",
    children: {
      field: "merchant_title",
      type: ElInput,
      props: {
        placeholder: "输入品牌名搜索",
      },
    },
  },
  {
    label: "所属城市",
    children: {
      field: "city",
      type: RegionPicker,
      props: {
        level: "city",
        clearable: true,
        placeholder: "选择城市搜索",
      },
    },
  },
  {
    label: "联系人电话",
    children: {
      field: "contact_phone",
      type: ElInput,
      placeholder: "按照完整的手机号搜索",
    },
  },
];

const [ProTable, { tableApi }] = useProTable({
  fetchUrl: ApiMerchant.merchantApplyList,
  fetchOptions: {
    routerQuery: true,
    foramtFetchParams: ({ city, ...rest }: any) => {
      return {
        city: city ? city.at(-1) : undefined,
        ...rest,
      };
    },
    formatUrlParams: ({
      audit_status,
      merchant_title,
      contact_phone,
      city,
    }: any = {}) => {
      return {
        city,
        contact_phone,
        merchant_title,
        audit_status: parseNumber(audit_status),
      };
    },
  },
  tableOptions: {
    columns: tableColumns,
  },
  formOptions: {
    formItems,
  },
});

const [Modal, modalApi] = useModal({
  width: "1100px",
  title: (source) =>
    source?.audit_status == 0 ? "商户入驻审核" : "查看商户信息",
});
</script>

<template>
  <ProTable />

  <Modal>
    <DialogMerchantDetail @success="tableApi.refresh" />
  </Modal>
</template>
